<template>
  <transition name="gallery">
    <div class="wrapper"
         @click="handleHide">
      <swiper :options="swiperOption"
              ref="mySwiper"
              v-if="hasList">
        <!-- slides -->
        <swiper-slide v-for="item of this.list"
                      :key="item.id">
          <div class="img-wrap">
            <div class="img-content"
                 aspectratio
                 w-375-375>
              <img :src="item"
                   alt=""
                   aspectratio-content>
            </div>

          </div>

        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"
             slot="pagination"></div>
      </swiper>
    </div>
  </transition>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'commonGallery',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        loop: true,
        observer: true,
        observeParents: true
      },
      timer: null
    }
  },
  methods: {
    handleHide () {
      let isShow = false
      this.changeDetailIsShow(isShow)
    },
    ...mapActions({
      changeDetailIsShow: 'changeDetailIsShow'
    })
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    },
    hasList () {
      return this.list.length
    },
    ...mapState({
      list: 'list',
      index: 'index'
    })
  },
  watch: {
    index (i) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.swiper.slideTo(i + 1, 0)
        this.timer = null
      }, 20)
    }
  }
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-container
  position absolute
  width 100%

.wrapper >>> .swiper-container-horizontal .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction
  color #fff
  bottom 50px

.wrapper >>> .swiper-pagination
  position fixed

.wrapper
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  width 750px
  height 1334px
  background-color #000
  z-index 12
  display flex
  justify-content center
  align-items center
  overflow hidden
  touch-action none

  .img-wrap
    width 750px

    .img-contnet
      width 100%

.gallery-enter-active, .gallery-leave-active
  transition all 0.3s

.gallery-enter, .gallery-leave-active
  transform translate3d(100%, 0, 0)
</style>
